﻿@model List<CPPaquetes.BusinessEntities.ProgramaDestino>

<link href="@Url.Content("~/Content/accordion.core.css")" rel="Stylesheet" type="text/css" charset="utf-8">
<link href="@Url.Content("~/Content/core.css")" rel="Stylesheet" type="text/css" charset="utf-8">
<link href="@Url.Content("~/Content/reset.css")" rel="Stylesheet" type="text/css" charset="utf-8">

<style type="text/css">
    .loading
    {
        display: none;
    }
   .accordion
{
    border: 1px solid #b8ebb1;
    width: 90%;
    font-size: 12px;
}
  .accordion li h3 a
   {
        background:             #666;
        background:             #666 -webkit-gradient(linear, left top, left bottom, from(#999), to(#666)) no-repeat;
        background:             #666 -moz-linear-gradient(top,  #999,  #666) no-repeat;
        border-bottom:          1px solid #333;
        border-top:             1px solid #ccc;
        color:                  #fff;
        display:                block;
        font-style:             normal;
        margin:                 0;
        padding:                5px 10px;
        text-shadow:            0 -1px 2px #333, #ccc 0 1px 2px;
  }
    
 .accordion li.active h3 a
{
    background: #369;
    background: #369 -webkit-gradient(linear, left top, left bottom, from(#3fa031), to(#46b536)) no-repeat;
    background: #369 -moz-linear-gradient(top,  #3fa031,  #46b536) no-repeat;
    border-bottom: 1px solid #083601;
    border-top: 1px solid #28b613;
    text-shadow: 0 -1px 2px #083601, #9cf 0 1px 2px;
    border-top-color: #89e47b;
    border-bottom-color: #3fa031;
}
.accordion li.locked h3 a
    {
        background: #963;
        background: #963 -webkit-gradient(linear, left top, left bottom, from(#c96), to(#963)) no-repeat;
        background: #963 -moz-linear-gradient(top,  #c96,  #963) no-repeat;
        border-bottom: 1px solid #630;
        border-top: 1px solid #fc9;
        text-shadow: 0 -1px 2px #630, #fc9 0 1px 2px;
    }
    .accordion li h3
    {
        margin: 0;
        padding: 0;
        font-size:12px;
        
    }
    .accordion .panel
    {
        padding: 10px;
    }
</style>

<div id="page">
    <ul id="example1" class="accordion">
        @foreach (CPPaquetes.BusinessEntities.ProgramaDestino item in Model)
        {    
            <li>
                <h3>@item.NOMBRE_DESTINO</h3>
                
                <div class="panel loading">
                <ul>
                    @foreach (var programa in item.PROGRAMAS)
                    {
                        <li>        
                        <a  target="_blank" href="@Url.Content("~/Home/ShowPrograma?Id=" + programa.PROGRAMA_ID)"  >@programa.NOMBRE_PROGRAMA&nbsp;@programa.NRO_NOCHES&nbsp;noches&nbsp;@programa.FECHA_VIGENCIA_HASTA</a>
                        </li>
                    }
                </ul>
                </div>
                </li> 
        }
    </ul>
</div>

<script src="@Url.Content("~/Scripts/jquery.accordion.2.0.js")" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
    $('#example1, #example3').accordion();
    $('#example2').accordion({
        canToggle: true
    });
    $('#example4').accordion({
        canToggle: true,
        canOpenMultiple: true
    });
    $(".loading").removeClass("loading");
</script>